<template>
	<view class="my">
		<view class="head">
			<view class="avatar-area" v-if="isLogin==false">
				<!-- 头像 -->
				<image src="" class="avatar"></image>
				<!-- 用户信息 -->
				<view class="user-info">
					<view class="">Hi~</view>
					<view class="">您还没有登录呢</view>
				</view>
			</view>
			<view class="avatar-area" v-if="isLogin==true">
				<!-- 头像 -->
				<image :src="myInfo.icon" class="avatar" @tap="goUserCenter"></image>
				<!-- 用户信息 -->
				<view class="user-info">
					<view class="">{{myInfo.nickname}}</view>
					<view class="">{{myInfo.username}}</view>
				</view>
			</view>
		</view>
		<!-- 登录和注册按钮 -->
		<view class="btns" v-if="isLogin==false">
			<navigator url="/pages/my/register/register" class="btn register">注册</navigator>
			<navigator url="/pages/my/login/login" class="btn login">登录</navigator>
		</view>
		<!-- 我的订单 -->
		<view class="my-orders">
			<view class="title">我的订单</view>
			<view class="navs">
				<navigator url="./orderlist/orderlist?type=0" class="nav-item">
					<image src="../../static/images/icons/icon-pay.png" class="icon"></image>
					<view class="text">待付款</view>
				</navigator>
				<navigator url="./orderlist/orderlist?type=1" class="nav-item">
					<image src="/static/images/icons/pay-done.png" class="icon"></image>
					<view class="text">已付款</view>
				</navigator>
				<navigator url="./orderlist/orderlist?type=2" class="nav-item">
					<image src="/static/images/icons/icon-car.png" class="icon"></image>
					<view class="text">已发货</view>
				</navigator>
				<navigator url="./orderlist/orderlist?type=3" class="nav-item">
					<image src="../../static/images/icons/icon-done.png" class="icon"></image>
					<view class="text">已收货</view>
				</navigator>
				<navigator url="./orderlist/orderlist?type=9" class="nav-item">
					<image src="/static/images/icons/icon-back.png" class="icon"></image>
					<view class="text">售后</view>
				</navigator>
			</view>
		</view>
		<!-- 网格导航 -->
		<view class="grid-block">
			<view class="grid-item">
				<image src="/static/images/icons/save.png" mode=""></image>
				<view class="text">收藏</view>
			</view>
			<view class="grid-item">
				<image src="/static/images/icons/brand.png" mode=""></image>
				<view class="text">品牌</view>
			</view>
			<view class="grid-item">
				<image src="/static/images/icons/article.png" mode=""></image>
				<view class="text">文章</view>
			</view>
			<navigator class="grid-item" url="../home/address/address">
				<image src="/static/images/icons/address.png" mode=""></image>
				<view class="text">地址</view>
			</navigator>
			<view class="grid-item">
				<image src="/static/images/icons/article.png" mode=""></image>
				<view class="text">卡包</view>
			</view>
			<navigator class="grid-item" url="cart/cart">
				<image src="/static/images/icons/cart2.png" mode=""></image>
				<view class="text">购物车</view>
			</navigator>
			<view class="grid-item">
				<image src="/static/images/icons/kf.png" mode=""></image>
				<view class="text">客服</view>
			</view>
			<view class="grid-item">
				<image src="/static/images/icons/kf.png" mode=""></image>
				<view class="text">测试</view>
			</view>
			<view class="grid-item">
				<image src="/static/images/icons/wxpay.png" mode=""></image>
				<view class="text">支付0.01元</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getMemberInfo
	} from "../../api/my/my.js"
	import mix from "../../mixins/mixins.js"
	export default {
		data() {
			return {
				isLogin: false,
				myInfo: {}
			};
		},
		mixins: [mix],
		methods: {
			// 跳转至个人信息页面
			goUserCenter() {
				uni.navigateTo({
					url: '/pages/my/usercenter/usercenter'
				})
			}
		},
		onShow() {
			var userInfo = uni.getStorageSync('userInfo');
			if (userInfo) {
				this.myInfo = userInfo;
				this.isLogin = true;
				// console.log(this.myInfo)
			} else {
				this.isLogin = false;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.my {
		padding: 0 40rpx;
		padding-top: var(--status-bar-height);
	}

	.head {
		display: flex;
		justify-content: space-between;
		width: 100%;
		height: 150rpx;
		margin-top: 60rpx;

		.avatar-area {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			height: 150rpx;

			//头像
			.avatar {
				width: 150rpx;
				height: 150rpx;
				border-radius: 50%;
				background-color: #c8c7cc;
			}

			//用户信息
			.user-info {
				display: flex;
				margin-left: 32rpx;
				height: 150rpx;
				color: #3d4c46;
				font-size: 28rpx;
				flex-direction: column;
				justify-content: space-around;
				box-sizing: border-box;
				padding: 14rpx 0;
			}
		}
	}

	// 登录和注册按钮
	.btns {
		margin: 40rpx auto;
		display: flex;
		justify-content: center;
		align-items: center;

		.btn {
			width: 182rpx;
			height: 76rpx;
			box-sizing: border-box;
			border: 2rpx solid #354e44;
			color: #354e44;
			font-size: 30rpx;
			text-align: center;
			line-height: 76rpx;
			border-radius: 10rpx;
			margin: 0 30rpx;
		}

		.login {
			background-color: #354e44;
			color: #fff;
		}
	}

	// 我的订单
	.my-orders {
		width: 670rpx;
		height: 208rpx;
		border-radius: 10rpx;
		background-color: #fff;
		margin-top: 60rpx;

		.title {
			height: 76rpx;
			font-size: 26rpx;
			line-height: 76rpx;
			border-bottom: 2rpx solid #ddd;
			box-sizing: border-box;
			margin: 0 54rpx;
		}

		.navs {
			padding: 0 54rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;
			text-align: center;

			.nav-item {
				height: auto;
				width: auto;

				.icon {
					width: 40rpx;
					height: 40rpx;
					margin-top: 20rpx;
				}

				.text {
					font-size: 26rpx;
					line-height: 36rpx;
					text-align: center;
				}
			}
		}
	}

	// 网格导航
	.grid-block {
		width: 670rpx;
		margin-top: 60rpx;
		background-color: #fff;
		border-radius: 20rpx;
		text-align: center;
		padding-top: 20rpx;
		display: flex;
		flex-wrap: wrap;

		.grid-item {
			width: 222rpx;
			height: 222rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			align-items: center;

			image {
				width: 50rpx;
				height: 50rpx;
				margin-top: 15rpx;
			}

			.text {
				font-size: 26rpx;
				margin-bottom: 50rpx;
			}
		}
	}
</style>
